export default {
  mounted() {
    this.createMap();
  },
  methods: {
    // 创建地图
    createMap() {
      const that = this;
      this.$nextTick(() => {
        // 地图加载
        that.map = new AMap.Map("index-map", {
          zooms: [8, 20],
          zoom: 8,
          center: [118.764562, 32.061525]
        });
        // 创建点标记
        AMapUI.loadUI(["overlay/SimpleMarker"], function(SimpleMarker) {
          that.leftStartMark = new SimpleMarker({
            // 设置节点属性
            iconLabel: {
              // 普通文本
              innerHTML: "起",
              style: {
                color: "#fff",
                fontSize: "100%",
                marginTop: "1px"
              }
            },
            iconStyle: "red"
          });
          // 创建左边结束点
          that.leftEndMark = new SimpleMarker({
            // 设置节点属性
            iconLabel: {
              // 普通文本
              innerHTML: "终",
              style: {
                color: "#fff",
                fontSize: "100%",
                marginTop: "1px"
              }
            },
            iconStyle: "red"
          });
        });
        // 获取鼠标点击的经纬度信息
        that.map.on("click", function(e) {
          // 线路点（起点-终点）
          if (that.typeBtnLeft == false) {
            // 先点击起点
            if (that.leftStartMark) {
              that.leftStart = e.lnglat.getLng() + "," + e.lnglat.getLat();
              that.leftStartMark.setMap(that.map);
              that.leftStartMark.setPosition([
                e.lnglat.getLng(),
                e.lnglat.getLat()
              ]);
            }
            // 然后决定终点
            that.typeBtnLeft = true;
          } else if (that.typeBtnLeft == true) {
            // 设置好终点
            if (that.leftEndMark) {
              that.leftEnd = e.lnglat.getLng() + "," + e.lnglat.getLat();
              that.leftEndMark.setMap(that.map);
              that.leftEndMark.setPosition([
                e.lnglat.getLng(),
                e.lnglat.getLat()
              ]);
            }
            // 终止点击
            that.typeBtnLeft = null;
            // 绘制路线
            that.createLeftLine();
          } else {
            console.log("点击完毕");
          }
        });
      });
    },
    // 绘制路径-左
    createLeftLine() {
      const that = this;
      if (that.leftStartMark && that.leftEndMark) {
        that.leftStartMark.setMap(null);
        that.leftEndMark.setMap(null);
      }
      // 绘制左边初始路径，起点-终点
      that.leftPath = [];
      that.leftPath.push(that.leftStart.split(","));
      that.leftPath.push(that.leftEnd.split(","));
      // 使用DragRoute插件-构造拖拽导航类
      that.map.plugin("AMap.DragRoute", function() {
        that.leftRoute = new AMap.DragRoute(
          that.map,
          that.leftPath,
          AMap.DrivingPolicy.LEAST_TIME,
          {
            showTraffic: false,
            polyOptions: {
              strokeColor: "#409EFF"
            }
          }
        );
        // 查询导航路径并开启拖拽导航
        that.leftRoute.search();
        // 监听完成情况
        that.leftRoute.on("complete", function(result) {
          // 移动起始点后自动改变当前经纬度
          that.leftStart =
            result.data.start.location.lng +
            "," +
            result.data.start.location.lat;
          that.leftEnd =
            result.data.end.location.lng + "," + result.data.end.location.lat;
          // 保存点路径集合
          that.leftResultPath = that.leftRoute.getRoute();
          console.log("leftResultPath", that.leftResultPath);
        });
      });
    },
    // 根据点位集合绘制自定义路线
    createLine() {
      const that = this;
      // 构建可视化线图层
      that.layer = new Loca.LineLayer({
        map: that.map
      });
      // 转换格式：{direction:'',lnglat:[[xx][xx]]}
      const mLine = [];
      // 这里放置点位集合的内容赋值给mleftRoute即可
      const mleftRoute = JSON.parse(sessionStorage.getItem("xxxx"));
      const leftLine = { lnglat: mleftRoute };
      mLine.push(leftLine);
      // 生成线数据
      that.layer.setData(mLine, {
        lnglat: "lnglat"
      });
      // 设置线的颜色
      that.layer.setOptions({
        style: {
          color: function(v) {
            return "#40ef2a";
          },
          borderWidth: 8
        }
      });
      // 渲染
      that.layer.render();
    }
  }
};
